CSS Tabellen

Doelstelling

Na deze les weet je hoe je tabellen met CSS opmaakt. Je leert hoe je:

1. cellen voorziet van opvulling: als de tekst in een tabelcel de rand of een andere cel raakt, is de tekst niet goed leesbaar. Voeg opvulling toe en de leesbaarheid verbetert;
2. koppen onderscheidt van de andere cellen: alle tabelkoppen vet maken (de standaardstijl voor het element <th>) maakt het gemakkelijker om te tabel in één oogopslag te lezen. Je kunt ze ook in hoofdletters zetten en ze een achtergrondkleur geven of ze onderstrepen om ze duidelijk van de inhoud te onderscheiden;
3. even en oneven rijen en kolommen een andere kleur geeft: rijen om en om kleuren helpt de gebruiker de rijen te volgen. Gebruik een kleur die subtiel afwijkt van de andere rijen zodat de tabel er als één geheel blijft uitzien;
4. getallen rechtsuitlijnt: je kunt de eigenschap textalign gebruiken om de inhoud van een kolom die getallen bevat rechts uit te lijnen, zodat grote getallen duidelijk onderscheiden worden van kleinere. Op die manier volg je de wiskundige manier van getallen schrijven;
5. een rollover effect maakt;

Leerpad

1. :nth-child selector
2. CSS property - border-radius
3. Standaard CSS opmaak voor tabellen
4. CSS opmaak voor tabellen
5. Tabel- en celranden
6. Rijen met alternerende achtergrondkleur
7. Kolommen met alternerende achtergrondkleur
8. Rollover

Opdracht

1. Stel CSS regels op het volgende resultaat zo nauwkeurig mogelijk te bereiken. De HTML hebben we geleerd in HTML Tabellen.

   

2. Let op:
   1. pas de kleuren aan het kleurenpalet dat je gekozen hebt;
   2. ronde randen kolomkoppen;
   3. alternatieve kleur, eerste kolom;
   4. alternatieve kleur kolomkoppen;
   5. alternatieve kleur rijen;
   6. gecentreerde tekst of links uitgelijnd;
3. deadline: Een week na de les
4. Download de opdracht van Cloud9 en stuur het zipbestand op.